<template>
  <div class="self_adaption">
    <div class="order_content">
      <ul class="nav_ul">
        <li v-for="(item, index) in carType" :key="index" :class="item.class" @click="navChange(item)">
          {{ item.text }}
        </li>
      </ul>
      <!-- 表格按钮区域 -->
      <div class="table_function" style="height: 80px; display: flex; align-items: center; margin-left: 30px">
        <el-button class="solid" @click="add" v-if="roleList.write">添加缺件扣款</el-button>
      </div>
      <!-- 表格 -->
      <div class="table" style="height: calc(100% - 150px); width: 96%; margin-left: 2%">
        <!-- 表格区域 -->
        <el-table
          :data="tableData"
          height="calc(100% - 50px)"
          style="width: 100%"
          :header-cell-style="{'text-align': 'center'}">
          <el-table-column prop="name" label="缺失零部件名称" align="center" />
          <el-table-column prop="deduction" label="缺件扣款标准(元/个)" align="center" />
          <el-table-column prop="maxNumber" label="最大缺件数" align="center" />
          <el-table-column label="操作" width="200" class="operation">
            <template #default="item">
              <div class="table_btn">
                <el-button size="small" class="none" @click="edit(item.$index, item.row)" v-if="roleList.write"
                  >编辑</el-button
                >
                <el-button size="small" class="none" @click="del(item.$index)" v-if="roleList.write">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 添加缺件扣款 -->
    <div class="plateform" v-if="plateformShow">
      <div class="title1">
        <div class="title_mes" v-if="type == 'Add'">添加缺件扣款</div>
        <div class="title_mes" v-else>编辑</div>
        <span class="close" @click="maskBtn1">✖</span>
      </div>
      <div class="content1">
        <div class="mes">
          <span class="text">缺失零部件：&nbsp;&nbsp;</span>
          <el-input placeholder="请输入缺失零部件" v-model="addformdata.name" />
        </div>
        <div class="mes">
          <span class="text">缺失扣款标准(元/个)：&nbsp;&nbsp;</span>
          <el-input placeholder="请输入缺失扣款标准" type="number" v-model="addformdata.deduction" />
        </div>
        <div class="mes">
          <span class="text">最大缺件数：&nbsp;&nbsp;</span>
          <el-input placeholder="请输入最大缺件数" type="number" v-model="addformdata.maxNumber" />
        </div>
        <div class="btn">
          <el-button class="hollow" @click="maskBtn1">取消</el-button>
          <el-button class="solid" @click="plateformSure">确定</el-button>
        </div>
      </div>
    </div>
    <!-- 遮罩层 -->
    <div id="mask1" v-if="mask" @click="maskBtn1"></div>
  </div>
</template>
<script setup lang="ts">
import {ref, onMounted} from 'vue';
import {RequestMissingPartDeduction, RequestMissingPartDeductionAdd} from '@/api/path/index.js';
import {Edit} from '@element-plus/icons-vue';
import {ElMessage} from 'element-plus';
import useAuthorize from '@/hooks/authorize';
let roleList = useAuthorize();
const plateformShow = ref(false); //控制缺件添加弹出框的显示
const addformdata = ref({
  name: '',
  maxNumber: 0,
  deduction: 0,
});
const carTypeShow = ref(0);
const carType = ref([
  {
    class: ['navlist1', 'nav_li1'],
    text: '大车',
    status: 0,
  },
  {
    class: ['nav_li1'],
    text: '小车',
    status: 1,
  },
]);
const navChange = (item: any) => {
  console.log(item);
  for (let i = 0; i < carType.value.length; i++) {
    carType.value[i].class = ['nav_li1'];
  }
  item.class = ['navlist1', 'nav_li1'];
  carTypeShow.value = item.status;
  if (item.status == 0) {
    tableData.value = bigType.value;
  } else {
    tableData.value = smallType.value;
  }
};
const tableData = ref<any>([]); // 表格列表
const mask = ref(false); //控制遮罩层显示
interface RestaurantItem {
  value: string;
  link: string;
}
const consolidateOrder = ref<any>([]);
const restaurants = ref<RestaurantItem[]>([]);
const loadAll = () => {
  return consolidateOrder.value;
};
// 挂载
onMounted(() => {
  acquireOrder();
  restaurants.value = loadAll();
});
const companyNode = JSON.parse(localStorage.getItem('roleInfo')!).company;
const bigType = ref<any>([]);
const smallType = ref<any>([]);
const nodeId = ref();
/**
 * 获取列表
 */
const acquireOrder = async () => {
  const a = await RequestMissingPartDeduction(companyNode);
  bigType.value = JSON.parse(a.resultObj.bigType.value);
  smallType.value = JSON.parse(a.resultObj.smallType.value);
  carTypeShow.value == 0 ? (tableData.value = bigType.value) : (tableData.value = smallType.value);
  nodeId.value = a.resultObj.id;
};

const type = ref('Add'); //Add表示点击的是添加，Edit表示点击编辑
/**
 * 点击添加
 */
const add = () => {
  plateformShow.value = true;
  type.value = 'Add';
  mask.value = true;
};
/**
 * 添加修改接口
 */
const requestMissingPartDeductionAdd = async () => {
  const a = await RequestMissingPartDeductionAdd({
    companyNode: companyNode,
    bigType: JSON.stringify(bigType.value),
    smallType: JSON.stringify(smallType.value),
    id: nodeId.value,
  });
  if (a.msg == '操作成功！') {
    ElMessage.success('添加成功！');
    acquireOrder();
    maskBtn1();
  } else {
    ElMessage.error('添加失败！');
  }
};
/**
 * 添加缺件扣款
 */
let timer = ref(); //设置记录时间，用于防抖
const plateformSure = async () => {
  clearTimeout(timer.value);
  const regex = /^(([1-9]{1}\d*))(\.\d{1,2})?$/;
  const regex1 = /^(([1-9]{1}\d*))$/;
  if (addformdata.value.name != '') {
    if (regex.test(addformdata.value.deduction)) {
      if (regex1.test(addformdata.value.maxNumber)) {
        timer.value = setTimeout(async () => {
          addformdata.value = {
            name: addformdata.value.name,
            maxNumber: Number(addformdata.value.maxNumber),
            deduction: Number(addformdata.value.deduction),
          };
          if (type.value == 'Add') {
            // 判断是大车还是小车
            carTypeShow.value == 0 ? bigType.value.push(addformdata.value) : smallType.value.push(addformdata.value);
          } else {
            carTypeShow.value == 0
              ? bigType.value.splice(editNum.value, 1, addformdata.value)
              : smallType.value.splice(editNum.value, 1, addformdata.value);
          }
          requestMissingPartDeductionAdd();
        }, 500);
      } else {
        ElMessage.error('请输入合法的最大缺件数');
      }
    } else {
      ElMessage.error('请输入合法的缺失扣款');
    }
  } else {
    ElMessage.error('请输入配件名');
  }
};
/**
 * 删除
 */
const del = async (index: number) => {
  carTypeShow.value == 0 ? bigType.value.splice(index, 1) : smallType.value.splice(index, 1);
  requestMissingPartDeductionAdd();
};
/**
 * 点击修改
 */
const editNum = ref();
const edit = (index: number, item: any) => {
  type.value = 'Edit';
  editNum.value = index;
  addformdata.value = {
    name: item.name,
    maxNumber: Number(item.maxNumber),
    deduction: Number(item.deduction),
  };
  console.log('编辑', addformdata.value);
  plateformShow.value = true;
  mask.value = true;
};
/**
 * 遮罩层数据
 */
const maskBtn1 = () => {
  plateformShow.value = false;
  mask.value = false;
  addformdata.value = {
    name: '',
    maxNumber: 0,
    deduction: 0,
  };
};
</script>
<style lang="scss" scoped>
@import '@/assets/css/plateform/Article/Content.css';
@import '@/assets/css/plateform/Shop/GoodsManage.css';

.order_content {
  width: 98%;
  height: 90%;
  margin: 2% auto;
  background: #fff;

  .nav_ul {
    width: 100%;
    height: 50px;
    display: flex;
    border-bottom: 2px solid #f2f2f2;

    .nav_li1 {
      width: 70px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      font-size: 14px;
      margin-left: 10px;
    }

    .first_li1 {
      margin-left: 40px;
    }

    .navlist1 {
      color: #1f69ff;
      border-bottom: 2px solid #1f69ff;
    }
  }
}

.plateform {
  width: 600px;
  height: 300px;
  position: absolute;
  background: #fff;
  z-index: 9999;
  top: 50%;
  left: 50%;
  margin-left: -300px;
  margin-top: -200px;

  .mes {
    margin-top: 20px;
    display: flex;
    align-items: center;

    .text {
      display: inline-block;
      width: 220px;
      font-size: 14px;
      color: #6c6c6c;
      text-align: right;
    }
  }
}

.order {
  .title {
    font-size: 18px;
    margin-top: 10px;
    margin-bottom: 20px;
  }

  .mes {
    font-size: 16px;
    line-height: 40px;
    color: #1d2129;
    background: #f5f7fa;
    padding-left: 10px;
  }

  .mes_title {
    font-size: 14px;
    color: #333;
    line-height: 22px;
    margin-top: 24px;
    margin-bottom: 8px;
  }

  .range {
    display: flex;
    align-items: center;
    position: relative;

    .range_box {
      display: flex;
      align-items: center;
      width: calc(100% - 110px);

      .range_box1 {
        width: calc(100% - 65px);
        margin-top: 20px;
      }
    }

    .range_operat {
      width: 64px;
      display: flex;
      align-items: center;
      position: absolute;
      right: 0;
      bottom: 5px;
    }
  }
}

::v-deep .el-radio.el-radio--large {
  width: 78px !important;
}

.sp ::v-deep .el-radio.el-radio--large {
  margin-top: 15px;
}

::v-deep .el-drawer__body {
  padding: 0 !important;
}

.table :deep(.el-table__cell) {
  text-align: center;
}

::v-deep .el-radio-group {
  width: 100% !important;
  background: pink !important;
}

::deep(.el-radio-group) {
  width: 100% !important;
  background: pink !important;
}

.el-form-item :deep(.el-input-group__prepend) {
  width: 10px;
  background-color: #116cf8;
  color: #fff;
}

.el-form-item :deep(.el-upload--picture-card) {
  height: 100px;
  width: 100px;
  opacity: 0;
}

.btn {
  width: 150px;
  position: absolute;
  right: 20px;
  bottom: 40px;
}

::v-deep .el-drawer.rtl {
  background: #f5f9ff !important;
  width: 750px !important;
}

.close_order :deep(.is-finish .el-step__line) {
  background: #f57373;
}

.order_edit {
  position: fixed;
  width: 40%;
  height: 50%;
  background: #fff;
  z-index: 300;
  top: 25%;
  left: 25%;
  overflow: scroll;

  .el-form {
    position: relative;
    z-index: 350;
    padding: 20px 50px;

    .el-form-item {
      position: relative;
      z-index: 400;

      .el-input {
        position: relative;
        z-index: 700;
      }
    }
  }
}

.el-table .warning-row {
  background: #44a2ff !important;
}

::v-deep .el-table--enable-row-transition .el-table__body td.el-table__cell {
  z-index: initial !important;
}
</style>
